<template>
  <div style="height:100%;">
    <div class="query">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="邮箱">
          <el-input type="email" v-model="search.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input type="text" v-model="search.nickname" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="search.sex" placeholder="性别">
            <el-option label="全部" :value="'all'"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="search.type" placeholder="用户类型">
            <el-option label="全部" :value="'all'"></el-option>
            <el-option label="普通用户" :value="1"></el-option>
            <el-option label="专家用户" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadUserList(true)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height:calc(100% - 120px);">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column prop="avatar" label="头像" width="75">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="200">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="120">
          <template slot-scope="scope">
            {{scope.row.sex == 1 ? "男" : "女"}}
          </template>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍">
        </el-table-column>
        <el-table-column prop="type" label="用户类型" width="100">
          <template slot-scope="scope">
            <el-tag>{{scope.row.type == 1 ? "普通用户" : "专家用户"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column prop="deleted" label="状态" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.deleted == 1 ? "正常" : "已禁用"}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="openEditUser(scope.row)" type="primary" size="small">编辑</el-button>
            <el-button type="warning" size="mini" @click="banU(scope.row)" v-if="scope.row.deleted == 1">禁用</el-button>
            <el-button type="primary" size="mini" @click="banU(scope.row)" v-else>恢复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="`编辑用户信息 - ${userEditer.nickname}`" :visible.sync="editUserDialog" width="40%" center>
      <el-form :model="userEditer" status-icon ref="registerForm" label-width="100px">
        <el-form-item label="头像">
          <el-upload class="avatar-uploader" :action="`${apiConfig}/front/User/uploadAvatar`" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="{atoken:userMsg.token, aid:userMsg.objid}">
            <img v-if="userEditer.avatar" :src="userEditer.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="nickname" label="昵称">
          <el-input type="text" v-model="userEditer.nickname" autocomplete="off" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item label="提示">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" v-model="userEditer.introduce" style="margin:10px 0;">
          </el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select v-model="userEditer.sex" placeholder="性别" style="width:100%;">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提示">
          如需修改密码则填写密码和确认密码，默认为不修改密码。
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-input type="password" v-model="userEditer.password" autocomplete="off" placeholder="密码 (6-16个字符组成，区分大小写)"></el-input>
        </el-form-item>
        <el-form-item prop="reppassword" label="确认密码">
          <el-input type="password" v-model="userEditer.reppassword" autocomplete="on" placeholder="确认密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserDialog = false">取 消</el-button>
        <el-button type="primary" @click="resetUser">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination :current-page="search.page" :page-size="search.limit"  @current-change="handleCurrentChange" layout="prev, pager, next" :total="search.total" style="margin-top:10px;">
    </el-pagination>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import { apiConfig } from "@/api/apiTool"
import { getUserList, resetUserMsg, banUser } from "@/api/admin/user"
export default {
  data() {
    return {
      userList: [],
      search: {
        email: '',
        nickname: "",
        sex: "all",
        type: 'all',
        page: 1,
        limit: 10,
        total: 0
      },
      editUserDialog: false,
      userEditer: {},
      apiConfig: apiConfig.api,
    }
  },
  created() {
    this.loadUserList()
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType',
      userLegal: 'user/getUserIsLegal'
    })
  },
  methods: {
    loadUserList(clearPage = false) {
      if(clearPage){
        this.search.page = 1
      }
      getUserList(this.search, (res) => {
        if (res.code == 200) {
          this.userList = []
          this.userList.push(...res.data)
          this.search.total = res.total
        }
      })
    },
    openEditUser(item) {
      this.editUserDialog = !this.editUserDialog
      item.password = ""
      this.userEditer = JSON.parse(JSON.stringify(item))
    },
    resetUser() {
      resetUserMsg(this.userEditer, (res) => {
        if (res.code == 200) {
          this.userEditer.reppassword = ""
          this.userList = this.userList.map((item) => {
            if (item.objid == this.userEditer.objid) {
              item = JSON.parse(JSON.stringify(this.userEditer))
            }
            return item
          })
          this.editUserDialog = !this.editUserDialog
        }
      }, true)
    },
    banU(item) {
      let status = item.deleted == 1 ? 2 : 1;
      banUser({ objid: item.objid, status: status }, (res) => {
        if (res.code == 200) {
          item.deleted = status
        }
      }, true)
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.userEditer.avatar = res.data
        this.$message.success("头像上传成功")
      }
      else {
        this.$message.error(res.msg)
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG,JPEG,PNG,GIF 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    handleCurrentChange(val){
      this.search.page = val
      this.loadUserList()
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>